<template>
    <ContentField>
        <div class="row">
            <div class="col-2">
                <img class="img-fluid" src="https://cdn.acwing.com/media/user/profile/photo/308209_lg_392ee842db.jpg">
            </div>
            <div class="col-10">
                <div class="card">
                    <div class="card-header">
                        <nav class="navbar bg-body-tertiary">
                            <div class="container-fluid">
                                <a class="navbar-brand">我的bot</a>
                                <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addBot">添加bot</button>

                                <div class="modal fade modal-xl" id="addBot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">添加Bot</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="addtile" class="form-label">Title</label>
                                        <input v-model="botadd.title" type="text" class="form-control" id="addtile" placeholder="请输入标题">
                                        </div>
                                        <div class="mb-3">
                                        <label for="adddes" class="form-label">Description</label>
                                        <textarea v-model="botadd.description" class="form-control" id="adddes" rows="3"></textarea>
                                        </div>
                                        <div class="mb-3">
                                        <label for="addcode" class="form-label">Code</label>
                                        
                                        <VAceEditor
            v-model:value="botadd.code"
            @init="editorInit"
            lang="c_cpp"
            theme="textmate"
            style="height: 300px"
            :options="{
              enableBasicAutocompletion: true, //启用基本自动完成
              enableSnippets: true, // 启用代码段
              enableLiveAutocompletion: true, // 启用实时自动完成
              fontSize: 14, //设置字号
              tabSize: 2, // 标签大小
              showPrintMargin: false, //去除编辑器里的竖线
              highlightActiveLine: true,
            }"
          />

                                        </div> 
                                    </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button @click="add_a_bot" type="button" class="btn btn-primary">添加</button>
                                </div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                    <div class="card-body">
                        <table class="table  table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                
                            </thead>
                            <tbody>
                                    <tr class="botinfo" v-for="bot of bots" :key="bot.id">
                                        <th>{{ bot.title }}</th>
                                        <td>{{bot.createTime}}</td>
                                        <td>
                                            <button type="button" class="btn btn-secondary" @click="select_a_bot(bot)" data-bs-toggle="modal" data-bs-target="#updatebot">修改</button>
                                                <div class="modal fade modal-xl" id="updatebot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog">
                                                <div class="modal-content">
                                                <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">修改Bot</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label for="exampleFormControlInput1" class="form-label">Title</label>
                                                        <input v-model="botselect.title" type="text" class="form-control" id="exampleFormControlInput1" placeholder="请输入标题">
                                                        </div>
                                                        <div class="mb-3">
                                                        <label for="exampleFormControlTextarea1" class="form-label">Description</label>
                                                        <textarea v-model="botselect.description" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                        <label for="exampleFormControlTextarea1" class="form-label">Code</label>
                                                        
                                                        <VAceEditor
                                                            v-model:value="botselect.code"
                                                            @init="editorInit"
                                                            lang="c_cpp"
                                                            theme="textmate"
                                                            style="height: 300px"
                                                            :options="{
                                                            enableBasicAutocompletion: true, //启用基本自动完成
                                                            enableSnippets: true, // 启用代码段
                                                            enableLiveAutocompletion: true, // 启用实时自动完成
                                                            fontSize: 14, //设置字号
                                                            tabSize: 2, // 标签大小
                                                            showPrintMargin: false, //去除编辑器里的竖线
                                                            highlightActiveLine: true,
                                                            }"
                                                        />

                                                        </div> 
                                                    </div>
                                                <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <button type="button" class="btn btn-primary" @click="update_a_bot(botid)">修改</button>
                                                </div>
                                                </div>
                                                </div>
                                                </div>
                                            <button type="button" class="btn btn-dark" @click="delete_a_bot(bot)">删除</button>
                                            <button type="button" class="btn btn-primary" @click="select_a_bot(bot)" data-bs-toggle="modal" data-bs-target="#selectbot">查看</button>
                                                <div class="modal fade modal-xl" id="selectbot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                    <div class="modal-content">
                                                    <div class="modal-header">
                                                    <h5 class="modal-title" id="staticBackdropLabel">查看bot</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label for="exampleFormControlInput1" class="form-label">Title</label>
                                                            <input v-model="botselect.title" type="text" class="form-control" id="exampleFormControlInput1" placeholder="">
                                                            </div>
                                                            <div class="mb-3">
                                                            <label for="exampleFormControlTextarea1" class="form-label">Description</label>
                                                            <textarea v-model="botselect.description" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                            <label for="exampleFormControlTextarea1" class="form-label">Code</label>
                                                            <VAceEditor
                                                            v-model:value="botselect.code"
                                                            @init="editorInit"
                                                            lang="c_cpp"
                                                            theme="textmate"
                                                            style="height: 300px"
                                                            :options="{
                                                            enableBasicAutocompletion: true, //启用基本自动完成
                                                            enableSnippets: true, // 启用代码段
                                                            enableLiveAutocompletion: true, // 启用实时自动完成
                                                            fontSize: 14, //设置字号
                                                            tabSize: 2, // 标签大小
                                                            showPrintMargin: false, //去除编辑器里的竖线
                                                            highlightActiveLine: true,
                                                            }"
                                                        />
                                                            </div> 
                                                        </div>
                                                    <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" @click="shut_modal(selectModalId)">关闭</button>
                                                    </div>
                                                    </div>
                                                    </div>
                                                    </div>
                                        </td>
                                    </tr>
                                </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </ContentField>
</template>

<script>
import store from '@/store';
import ContentField from '../../../components/ContentField.vue'
import $ from 'jquery';
import { Modal } from 'bootstrap/dist/js/bootstrap';
import { reactive, ref } from 'vue';
import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds";
import 'ace-builds/src-noconflict/mode-c_cpp';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';


export default{
    components:{
        ContentField,
        VAceEditor,
        },
    
    setup(){
        ace.config.set(
      "basePath",
      "https://cdn.jsdelivr.net/npm/ace-builds@" +
        require("ace-builds").version +
        "/src-noconflict/")

        
        const selectModalId = ref("selectbot");
        const shut_modal =(modalId) =>{
            Modal.getInstance("#" + modalId).hide();
        }
        const botadd = reactive({
            title:'',
            description:'',
            code:''
        })
        const botselect = reactive({
            title:'',
            description:'',
            code:''
        })
        let botid = ref('');
        let bots = ref([]);
        const refresh_bots = () =>{
            $.ajax({
            url:"http://127.0.0.1:3000/api/user/bot/getlist/",
            type:"get",
            headers:{
              Authorization:"Bearer " + store.state.user.token
            },
            success(resp){
                bots.value = resp;
            },
            error(){
            }
        })
        };
        const add_a_bot = () =>{
            $.ajax({
            url:"http://127.0.0.1:3000/api/user/bot/add/",
            type:"post",
            data:{
                title:botadd.title,
                code:botadd.code,
                description:botadd.description
            },
            headers:{
                      Authorization:"Bearer " + store.state.user.token
            },
            success(){
                refresh_bots();
                shut_modal("addBot");
                botadd.title = '';
                botadd.code = '';
                botadd.description = '';
            },
            error(){
                
            }
        })
        };
        const delete_a_bot = (bot) =>{
            
            $.ajax({
            url:"http://127.0.0.1:3000/api/user/bot/delete/",
            type:"post",
            data:{
                id:bot.id
            },
            headers:{
                      Authorization:"Bearer " + store.state.user.token
            },
            success(){
                refresh_bots();
            },
            error(){
                
            }
        })
        };
        const select_a_bot = (bot) =>{
            botid.value = bot.id;
            $.ajax({
                url:"http://127.0.0.1:3000/api/user/bot/selectone/",
                type:"get",
                data:{
                    id:bot.id,
                },
                headers:{
                    Authorization:"Bearer " + store.state.user.token
                },
                success(resp){
                    botselect.title = resp.title;
                    botselect.code = resp.code;
                    botselect.description = resp.description;
                }
            })
        };
        const update_a_bot = (botid) =>{
            $.ajax({
            url:"http://127.0.0.1:3000/api/user/bot/update/",
            type:"post",
            data:{
                id:botid,
                title:botselect.title,
                code:botselect.code,
                description:botselect.description
            },
            headers:{
                      Authorization:"Bearer " + store.state.user.token
            },
            success(){
                shut_modal("updatebot");
                refresh_bots();
                botselect.title = '';
                botselect.code = '';
                botselect.description = '';
            },
            error(){
            }
        })
        }
        refresh_bots();
        return{
            bots,
            refresh_bots,
            add_a_bot,
            botadd,
            delete_a_bot,
            select_a_bot,
            botselect,
            shut_modal,
            selectModalId,
            update_a_bot,
            botid,
        }
    
        
        
        
    }

}
</script>


<style scoped>
.card{
    margin-bottom: 10px;
    margin-top: 10px;
}
.botinfo{
    margin-bottom: 10px;
}
.btn{
    margin-right: 10px;
}
</style>